<template>
  <input v-model="btnClassObject.error" type="checkbox" /> error
  <input v-model="btnClassObject.flat" type="checkbox" /> flat
  <br />
  <br />
  <button :class="btnClassObject">我是一个普通的按钮</button>

  <hr />
  <input v-model="capsule" type="checkbox" /> 胶囊 <input v-model="block" type="checkbox" /> 块
  <br />
  <br />
  <button :class="{ rounded: capsule, fullWidth: block }">我是一个普通的按钮</button>
</template>

<script>
export default {
  data: () => ({
    btnClassObject: {
      error: false, // 主题色
      flat: false, // 阴影
    },
    capsule: false, // 胶囊
    block: false, // 块
  }),
}
</script>

<script setup>
import { ref, reactive } from 'vue'

let btnClassObject = reactive({
  error: false, // 主题色
  flat: false, // 阴影
})
let capsule = ref(false) // 胶囊
let block = ref(false) // 块
</script>

<style scoped>
button {
  border: none;
  padding: 15px 20px;
  background-color: rgb(179, 175, 175);
}

.error {
  background-color: rgb(167, 58, 58);
  color: white;
}

.flat {
  box-shadow: 0 0 8px gray;
}

.rounded {
  border-radius: 100px;
}

.fullWidth {
  width: 100%;
}
</style>
